<template>
    <div class="header-action">
        <ul>
            <li class="header-phone">
                <div class="icon"><i class="flaticon-telephone"></i></div>
                <router-link :to="`tel:${usphone}`"><span>立即联系我们</span>{{ usphone }}</router-link>
            </li>
            <li  class="header-user">
                 <router-link
                  :to="isLogin ? routes.customer+'/'+customer.id+'/'+customer.name :routes.registerlogin" 
                  :title="isLogin ? `进入'${customer.nickname}'的主页` :'登录或注册'"
                  ><i class="flaticon-user"></i></router-link></li>
            <li v-if="isLogin" class="header-wishlist">
                <div class="header-cart-wrap">
                    <router-link to="cart.html"><i class="flaticon-heart-shape-outline"></i></router-link>
                    <span class="item-count">2</span>
                    <ul class="minicart">
                        <li class="d-flex align-items-start">
                            <div class="cart-img">
                                <router-link to="shop-details.html"><img src="img/product/cart_p01.jpg"
                                        alt=""></router-link>
                            </div>
                            <div class="cart-content">
                                <h4> <router-link to="shop-details.html">Organic Farm Fresh Nuts</router-link></h4>
                                <div class="cart-price">
                                    <span class="new">$229.9</span>
                                    <span><del>$229.9</del></span>
                                </div>
                            </div>
                            <div class="del-icon">
                                <router-link to="#"><i class="far fa-trash-alt"></i></router-link>
                            </div>
                        </li>
                        <li class="d-flex align-items-start">
                            <div class="cart-img">
                                <router-link to="shop-details.html"><img src="img/product/cart_p02.jpg"
                                        alt=""></router-link>
                            </div>
                            <div class="cart-content">
                                <h4> <router-link to="shop-details.html">Organic Fresh Nuts Vanla Butter</router-link>
                                </h4>
                                <div class="cart-price">
                                    <span class="new">$229.9</span>
                                    <span><del>$229.9</del></span>
                                </div>
                            </div>
                            <div class="del-icon">
                                <router-link to="#"><i class="far fa-trash-alt"></i></router-link>
                            </div>
                        </li>
                        <li>
                            <div class="total-price">
                                <span class="f-left">Total:</span>
                                <span class="f-right">$239.9</span>
                            </div>
                        </li>
                        <li>
                            <div class="checkout-link">
                                <router-link to="cart.html">Shopping Cart</router-link>
                                <router-link class="black-color" to="checkout.html">Checkout</router-link>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
            <li v-if="isLogin" class="header-cart-action">
                <div class="header-cart-wrap">
                    <router-link to="cart.html"><i class="flaticon-shopping-basket"></i></router-link>
                    <span class="item-count">2</span>
                    <ul class="minicart">
                        <li class="d-flex align-items-start">
                            <div class="cart-img">
                                <router-link to="shop-details.html"><img src="img/product/cart_p01.jpg"
                                        alt=""></router-link>
                            </div>
                            <div class="cart-content">
                                <h4> <router-link to="shop-details.html">Organic Farm Fresh Nuts</router-link></h4>
                                <div class="cart-price">
                                    <span class="new">$229.9</span>
                                    <span><del>$229.9</del></span>
                                </div>
                            </div>
                            <div class="del-icon">
                                <router-link to="#"><i class="far fa-trash-alt"></i></router-link>
                            </div>
                        </li>
                        <li class="d-flex align-items-start">
                            <div class="cart-img">
                                <router-link to="shop-details.html"><img src="img/product/cart_p02.jpg"
                                        alt=""></router-link>
                            </div>
                            <div class="cart-content">
                                <h4> <router-link to="shop-details.html">Organic Fresh Nuts Vanla Butter</router-link>
                                </h4>
                                <div class="cart-price">
                                    <span class="new">$229.9</span>
                                    <span><del>$229.9</del></span>
                                </div>
                            </div>
                            <div class="del-icon">
                                <router-link to="#"><i class="far fa-trash-alt"></i></router-link>
                            </div>
                        </li>
                        <li>
                            <div class="total-price">
                                <span class="f-left">Total:</span>
                                <span class="f-right">$239.9</span>
                            </div>
                        </li>
                        <li>
                            <div class="checkout-link">
                                <router-link to="cart.html">Shopping Cart</router-link>
                                <router-link class="black-color" to="checkout.html">Checkout</router-link>
                            </div>
                        </li>
                    </ul>
                </div>
                
            </li>
        </ul>
    </div>
</template>
 
<script>


import {  mapActions, mapMutations, mapState,mapGetters } from 'vuex';
import { getusphone } from '@/api/head';
export default {
    components: {

    },
    data() {
        return {
            usphone:null,
            routes:{
                customer:'/customer',
                registerlogin:'/registerlogin'
            }
        }
    },
    computed: {
        ...mapState({
            customer:state=>state.customer.customer,
            account:state=>state.customer.account
        }),
        ...mapGetters('customer',['isLogin'])
    },
    created() {
        getusphone().then(usphone=>{
            this.usphone=usphone
        })
    },
    mounted() {

    },
    watch: {

    },

    beforeCreate() {

    },
    beforeDestroy() {

    },
    deactivated() {

    },
}
</script>
<style>

</style>